import React, { useState, useEffect } from 'react';
// ui
import ReactECharts from 'echarts-for-react';

const Page: React.FC<any> = (props: any, ref: any) => {
    const [chartOption, setChartOption] = useState({       
        tooltip: {
            trigger: "axis"
        },
        xAxis: {
            type: 'category',
            data: [

                
            ],
            axisLabel: {
                interval: 0,
                rotate: 40,
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'bar'
            }
        ]
    });

    useEffect(() => {
        if (props.areaData) {
            let chartOptionCopy = JSON.parse(JSON.stringify(chartOption));
            let Arr1 = props.areaData.children.sort(function (a: any, b: any) {
                return b.today.heal - a.today.heal;
            }).slice(0, 7);
            let temp = {seriesData:[],xAxisData:[]};
            Arr1.forEach((item:any)=> {
                temp.seriesData.push(item.today.heal);
                temp.xAxisData.push(item.name);
            });           
            chartOptionCopy.series[0].data = temp.seriesData;
            chartOptionCopy.xAxis.data = temp.xAxisData;
            setChartOption(chartOptionCopy);
        }
    }, [props.areaData]);// eslint-disable-line

    return (
        <>
            <ReactECharts style={{ height: '100%' }} option={chartOption} />
        </>
    );
}

export default Page;